import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, TouchableOpacity, StyleSheet,Text } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import {  px } from '../../utils/ScreenUtil';
import _styles from './styles';

export default class Select extends Component {
	static propTypes = {
		icon: PropTypes.node,            /* icon元素 */
		openModal: PropTypes.func,       /* 打开窗口的方法 */
		showModal: PropTypes.bool,       /* 窗口打开状态 */
		onSelect: PropTypes.func,        /* 选择时的回调函数 */
		showLabel: PropTypes.bool,       /* 显示文字（默认显示） */
		isPress: PropTypes.bool,         /* 是否可点击 */
		onPress: PropTypes.func,         /* 点击事件 */
		isTiggerLabel: PropTypes.bool,   /* 是否切换按钮文字 */
		defaultIndex: PropTypes.number,  /* 默认选中的选项下标 */
	}

	state = {
		selectedIndex: 0,  /* 选中的选项下标 */
	}

	componentWillMount() {
		const { defaultIndex = 0 } = this.props;

		this.setState({
			selectedIndex: defaultIndex,
		});
	}

	/**
	 * 选中后执行的函数
	 * @param  {Object} item 选中的选项
	 * @param  {Number} i    序号
	 * @return {void}
	 */
	onSelect = (item, i) => {
		const { onSelect = () => {} } = this.props;
		onSelect(item);

		this.setState({ selectedIndex: i });
		this.props.closeModal();
	}

	/**
	 * 渲染按钮文字
	 * @return {Node}
	 */
	renderLabel = () => {
		const {
			title = '',
			openModalKey,
			toolKey,
			isSelect = true,
			isTiggerLabel = true,
			options = [],
		} = this.props;
		const { selectedIndex } = this.state;

		let label = title;

		if(isSelect && isTiggerLabel && options.length > 0) {
			label = options[selectedIndex].label;
		}

		const titleColor = openModalKey === toolKey ? '#000' : '#555';

		if(React.isValidElement(title)) {
			return title;
		} else {
			return (
				<Text style={[styles.itemLabel, {color: titleColor}]} numberOfLines={1}>
					{ label }
				</Text>
			);
		}
	}

	/**
	 * 按钮点击事件
	 * @return {void}
	 */
	onPress = () => {
		const {
			openModal,
			closeModal,
			options = [],
			showModal,
			toolKey,
			openModalKey,
			isSelect = true,
			onPress = () => {},
		} = this.props;
		const { selectedIndex } = this.state;

		if(!isSelect) {
			onPress();
			return;
		}


		if(showModal && openModalKey === toolKey) {
			closeModal();
		} else {
			openModal(toolKey, () => <SelectTool
				list={options}
				onSelect={this.onSelect}
				selectedIndex={selectedIndex}
			/>);
		}
	}

	render() {
		const {
			icon,
			openModalKey,
			toolKey,
			style,
			showLabel = true,
			isSelect = true,
		} = this.props;

		/* 设置选中时的图标 */
		let titleColor = openModalKey === toolKey ? '#000' : '#666';
		let iconName = openModalKey === toolKey ? 'md-arrow-dropup' : 'md-arrow-dropdown';

		return (
			<TouchableOpacity style={[_styles.filterItem, style]} onPress={this.onPress}>
				{
					showLabel ? this.renderLabel() : undefined
				}
				{
					icon || <Ionicons
						name={iconName}
						size={16}
						color={titleColor}
						style={styles.filterIcon}
					/>
				}
			</TouchableOpacity>
		);
	}
}

/**
 * 搜索工具栏选择器窗口
 * @param  {Object} props props
 * @return {ReactComponent}
 */
const SelectTool = props =>  {
	const icon = (
		<MaterIcons
			name="check"
			size={px(34)}
			style={{height: px(34)}}
			color={'#000'}
		/>
	);

	const renderItem = (item, i) => {
		const textColor = props.selectedIndex === i ? '#000' : '#666';
		return (
			<TouchableOpacity
				key={i}
				style={styles.selectItem}
				onPress={() => props.onSelect(item, i)}
				onStartShouldSetResponder={() => true}
				onMoveShouldSetResponder={() => true}
			>
				<Text color={textColor} numberOfLines={1}>{item.label}</Text>
				{props.selectedIndex === i ? icon : undefined}
			</TouchableOpacity>
		);
	}

	return (
		<View style={styles.filterModel}>
			{ props.list.map(renderItem) }
		</View>
	);
}

const styles = StyleSheet.create({
	filterIcon: {
		marginLeft: 4,
	},
	itemLabel: {
		fontSize: px(28),
	},
	filterModel: {
		backgroundColor: '#fff',
		padding: px(10),
	},
	selectItem: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		height: px(80),
		paddingLeft: px(30),
		paddingRight: px(30),
	},
});